<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <!-- 兼容ie678 -->
     <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <title>阿里百秀</title>
   <!-- 引入bootstrap.css -->
   <link rel='stylesheet' href='../bootstrap/css/bootstrap.min.css'>
    <!-- 引入index.css -->
    <link rel='stylesheet'  href='css/index.css'>
    <!-- 引入jquery -->
    <script src='../js/jquery.min.js'></script>
    <!-- 引入bootstrap.js -->
    <script src='../bootstrap/js/bootstrap.min.js'></script>
</head>
<body>
   <div class="container">
       <div class="row">
          <!-- 左侧 -->
          <header class='col-md-2'>
             <div class="logo">
                 <a href='#'>
                    <img src='images/logo.png' alt='' class='hidden-xs'> 
                 </a>
                 <span class='visible-xs'>阿里百秀</span>
                </div>
                 <div class="nav">
                     <ul>
                         <li><a href="#" class='glyphicon glyphicon-camera'>生活馆</a>
                        </li>
                         <li><a href="#" class='glyphicon glyphicon-picture'>自然汇</a></li>
                         <li><a href="#" class='glyphicon glyphicon-phone'>科技潮</a></li>
                         <li><a href="#" class='glyphicon glyphicon-gift'>奇趣事</a></li>
                         <li><a href="#" class='glyphicon glyphicon-glass'>美食杰</a></li>
                     </ul>
             </div> 
          </header>
          <!-- 中间 -->
          <article class='col-md-7'>
              <!-- 新闻 -->
              <div class="news clearfix" >
                  <ul>
                      <li>
                        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                            <!-- Wrapper for slides -->
                            <div class="carousel-inner" role="listbox">
                              <div class="item active">
                                <img src="upload/banner.dpg" alt="...">
                                <div class="carousel-caption">
                                    京东生鲜面点节
                                  </div>
                              </div>
                              <div class="item">
                                <img src="upload/banner1.dpg" alt="...">
                                <div class="carousel-caption">
                                   净水器
                                  </div>
                
                              </div>
                              <div class="item">
                                <img src="upload/banner2.dpg" alt="...">
                                <div class="carousel-caption">
                                   时尚好物
                                  </div>
                              </div>
                              <div class="item">
                                <img src="upload/banner3.dpg" alt="...">
                                <div class="carousel-caption">
                                御走仿
                                  </div>
                              </div>
                              
                            </div>
                          
                            <!-- Controls -->
                            <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                              <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                              <span class="sr-only">Previous</span>
                            </a>
                            <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                              <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                              <span class="sr-only">Next</span>
                            </a>
                          </div>
                      </li>
                      <li>
                        <a href='#'>
                            <img src='upload/1.jpg' alt=''>
                            <p>奇了.成都一小区护卫长的像马云 市民纷纷求合影</p>
                        </a>
                      </li>
                      <li>
                        <a href='#'>
                            <img src='upload/2.jpg' alt=''>
                            <p>奇了.成都一小区护卫长的像马云 市民纷纷求合影</p>
                        </a>
                      </li>
                      <li>
                        <a href='#'>
                            <img src='upload/3.jpg' alt=''>
                            <p>奇了.成都一小区护卫长的像马云 市民纷纷求合影</p>
                        </a>
                      </li>
                      <li>
                        <a href='#'>
                            <img src='upload/4.jpg' alt=''>
                            <p>奇了.成都一小区护卫长的像马云 市民纷纷求合影</p>
                        </a>
                      </li>
                  </ul>

              </div>
              <!-- 发布 -->
              <div class="publish">
                  <div class="row">
                      <div class='col-sm-9'>
                          <h4>生活馆 关于指甲的10个健康知识 你知道几个?</h4>
                          <p class='text-muted hidden-xs'>alibaixiu 发布于2015-11-23</p>
                          <p class='hidden-xs'>指甲是经常容易忽略的身体部位，事实上从指甲的健康程度可以看出一个人的身体状况，快来看看10个暗藏在指甲里面的知识吧!</p>
                          <p class='text-muted'>阅读(2417)评论(1)赞(18)<span class='hidden-xs'>标签：健康/ 感染/ 指甲/ 疾病/ 皮肤/ 营养/ 趣味生活/</span></p>
                        

                      </div>
                      <div class='col-sm-3 pic hidden-xs'>
                          <img src='upload/4.jpg' alt=''>
                      </div>

                  </div>
                  <div class="row">
                    <div class='col-sm-9'>
                        <h4>生活馆 关于指甲的10个健康知识 你知道几个?</h4>
                        <p class='text-muted hidden-xs'>alibaixiu 发布于2015-11-23</p>
                        <p class='hidden-xs'>指甲是经常容易忽略的身体部位，事实上从指甲的健康程度可以看出一个人的身体状况，快来看看10个暗藏在指甲里面的知识吧!</p>
                        <p class='text-muted'>阅读(2417)评论(1)赞(18)<span class='hidden-xs'>标签：健康/ 感染/ 指甲/ 疾病/ 皮肤/ 营养/ 趣味生活/</span></p>
                      

                      

                    </div>
                    <div class='col-sm-3 pic hidden-xs'>
                        <img src='upload/4.jpg' alt=''>
                    </div>

                </div>
                <div class="row">
                    <div class='col-sm-9 hidden-xs'>
                        <h4>生活馆 关于指甲的10个健康知识 你知道几个?</h4>
                        <p class='text-muted hidden-xs'>alibaixiu 发布于2015-11-23</p>
                        <p class='hidden-xs'>指甲是经常容易忽略的身体部位，事实上从指甲的健康程度可以看出一个人的身体状况，快来看看10个暗藏在指甲里面的知识吧!</p>
                        <p class='text-muted'>阅读(2417)评论(1)赞(18)<span class='hidden-xs'>标签：健康/ 感染/ 指甲/ 疾病/ 皮肤/ 营养/ 趣味生活/</span></p>
                      


                    </div>
                    <div class='col-sm-3 pic hidden-xs'>
                        <img src='upload/4.jpg' alt=''>
                    </div>

                </div>
                <div class="row">
                    <div class='col-sm-9'>
                        <h4>生活馆 关于指甲的10个健康知识 你知道几个?</h4>
                          <p class='text-muted hidden-xs'>alibaixiu 发布于2015-11-23</p>
                          <p class='hidden-xs'>指甲是经常容易忽略的身体部位，事实上从指甲的健康程度可以看出一个人的身体状况，快来看看10个暗藏在指甲里面的知识吧!</p>
                          <p class='text-muted'>阅读(2417)评论(1)赞(18)<span class='hidden-xs'>标签：健康/ 感染/ 指甲/ 疾病/ 皮肤/ 营养/ 趣味生活/</span></p>
                        

                      

                    </div>
                    <div class='col-sm-3 pic hidden-xs'>
                        <img src='upload/4.jpg' alt=''>
                    </div>

                </div>
                <div class="row">
                    <div class='col-sm-9'>
                        <h4>生活馆 关于指甲的10个健康知识 你知道几个?</h4>
                        <p class='text-muted hidden-xs'>alibaixiu 发布于2015-11-23</p>
                        <p class='hidden-xs'>指甲是经常容易忽略的身体部位，事实上从指甲的健康程度可以看出一个人的身体状况，快来看看10个暗藏在指甲里面的知识吧!</p>
                        <p class='text-muted'>阅读(2417)评论(1)赞(18)<span class='hidden-xs'>标签：健康/ 感染/ 指甲/ 疾病/ 皮肤/ 营养/ 趣味生活/</span></p>
                      

                      

                    </div>
                    <div class='col-sm-3 pic hidden-xs'>
                        <img src='upload/4.jpg' alt=''>
                    </div>

                </div>
              </div>
          </article>
          <!-- 右侧 -->
          <aside class='col-md-3'>
              <a class='banner'>
                  <img src='upload/zgboke.jpg' alt=''>
              </a>
              <a href='#' class='hot'>
                  <span class='btn btn-primary'>热搜</span>
                  <h4 class='text-primary'>欢迎加入中国播客联盟</h4>
                  <p class='text-muted'>这里收录国内各个领域的优秀博客，是一个全人工编译的开放式播客联盟交流和展示平台...</p>
              </a>
          </aside>
       </div>
   </div>


  <script>
    $('.carousel').carousel({
        interval: 2000
    })
</script>
</body>
</html>